import { Component } from "react";

export default function withMouse(WrapperComponent) {
  class Mouse extends Component {
    state = {
      x: 0,
      y: 0,
    };
    // 监听鼠标移动事件
    componentDidMount() {
      window.addEventListener("mousemove", this.handleMouseMove);
    }

    // 监听鼠标移动事件
    componentWillUnmount() {
      window.removeEventListener("mousemove", this.handleMouseMove);
    }

    handleMouseMove = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      });
    };

    render() {
      return <WrapperComponent {...this.state} {...this.props} />;
    }
  }
  Mouse.displayName = `withMouse${getDispalyName(WrapperComponent)}`;
  return Mouse;
}

function getDispalyName(WrapperComponent) {
  return WrapperComponent.displayName || WrapperComponent.name || "Component";
}
